<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>默瀚-发布常规课程</title>

		<style>
			.content ul{
				border-top: 1px solid #dcdcdc;
				border-bottom: 1px solid #dcdcdc;
				padding: 10px;
				margin-bottom: 10px;
				background-color: #fff;
			}
			.content ul:first-child{
				border-top: none;
			}
		    /* top */
			.top{
				position: relative;
				height: 150px;
				width: 100%;
			}
			.top img{
				display: block;
				height: 150px;
				width: 100%;
				background-size: 100% 100%;
			}
			.top .t-b{
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				padding: 5px 15px;
				color: #fff;
				overflow: hidden;
			}
			.t-b-l{
				float: left;
			}
			.t-b-l .avatar{
				float: left;
				width: 50px;
				height: 50px;
				margin-right: 8px;
				border: none;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.t-b-l .avatar img{
				display: block;
				width: 50px;
				height: 50px;
				border: none;
				border-radius: 50%;
				border-radius: 50%;
				-webkit-border-radius: 50%;
			}
			.t-b-l .teach-info{
				float: left;
				margin-top: 10px;
				margin-right: 5px;
			}
			.teach-info .name{
				font-size: 18px;
			}
			.teach-info .teach-time{
				font-size: 13px;
			}
			.t-b-l .level{
				float: left;
				display: block;
				border: 1px solid #fff;
				border-radius: 4px;
				padding: 0 3px;
				background-color: #fab345;
				margin-top: 11px;
				margin-right: 8px;
				font-size: 13px;
			}
			.t-b-l .honour{
				float: left;
				display: block;
				border: 1px solid #fff;
				border-radius: 4px;
				background-color: #f55e1c;
				padding: 0 3px;
				margin-top: 11px;
				font-size: 13px;
			}
			.t-b-r{
				float: right;
				margin-top: 28px;
				font-size: 0px;
				font-weight: 600;
			}
			.t-b-r .money-icon{
				font-size: 14px;
				margin-right: 5px;
			}
			.t-b-r .money{
				font-size: 18px;
			}
			/* intro */
			.addr-title,
			.time-title,
			.intro-title{
				font-size: 0;
				padding-bottom: 4px;
			}
			.addr-title .left-border,
			.time-title .left-border,
			.intro-title .left-border{
				display: inline-block;
				height: 16px;
				width: 5px;
				margin-right: 5px;
				background-image: url(../images/icons/purpose_title.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.addr-title .title,
			.time-title .title,
			.intro-title .title{
				font-size: 14px;
				color: #53ceca;
				vertical-align: top;
			}
			ul.intro li{
				padding: 7px 5px;
				font-size: 0;
			}
			ul.intro li div{
				display: inline-block;
				font-size: 14px;
			}
			ul.intro li .left{
				color: #b4b4b4;
			}
			ul.intro li .right{
				margin-left: 20px;
			}
			/* evaluate */
			ul.evaluate li{
				position: relative;
			}
			.eva-title{
				position: absolute;
				left: 0;
				font-size: 0;
			}
			.eva-title .left-border{
				display: inline-block;
				height: 16px;
				width: 5px;
				margin-right: 5px;
				background-image: url(../images/icons/purpose_title.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.eva-title .title{
				font-size: 14px;
				color: #53ceca;
				vertical-align: top;
			}
			.evaluate .stars{
				margin-left: 75px;
				font-size: 0;
			}
			.evaluate .star{
				display: inline-block;
				width: 16px;
				height: 16px;
				margin-right: 8px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url(../images/icons/star_normal_uns.png);
			}
			.evaluate .star.select{
				background-image: url(../images/icons/star_normal_s.png);
			}
			.evaluate .stars .result{
				font-size: 14px;
				vertical-align: top;
			}
			a.total-eva{
				position: absolute;
				right: 0;
				font-size: 0;
				display: inline-block;
				text-decoration: none;
			}
			.total-eva .total{
				font-size: 14px;
				color: #b4b4b4;
				margin-right: 5px;
				vertical-align: top;
			}
			.total-eva .arrow{
				display: inline-block;
				width: 11px;
				height: 16px;
				background-size: 100% 100%;
				background-image: url(../images/icons/arrow_in.png);
				background-repeat: no-repeat;
			}
			/* time */
			.class-time li{
				padding: 0 5px;
				padding-top: 10px;
				font-size: 0;
			}
			.class-time .date{
				display: inline-block;
				width: 10%;
				padding: 5px 1%;
				margin: 0 1%;
				margin-bottom: 5px;
				font-size: 13px;
				text-align: center;
			}
			.date-t,
			.date-w{
				display: block;
			}
			.date-t{
				margin-bottom: 5px;
			}
			.class-time .hour span{
				display: inline-block;
				font-size: 13px;
				width: 19%;
				text-align: center;
				padding: 5px 0;
				margin-bottom: 5px;
			}
			.class-time .dates .select{
				background-color: #53ceca;
				color: #fff;
				font-size: 13px;
				font-family: "Hiragino Sans GB W6";
			}
			.class-time .hour .select{
				background-color: #53ceca;
				color: #fff;
				border: none;
				border-radius: 20px;
				-webkit-border-radius: 20px;
				font-size: 13px;
				font-family: "Hiragino Sans GB W6";
			}
			.class-time .hour .pass,
			.class-time .hour .cannot-select{
				color: #b4b4b4;
			}
			/* class-addr */
			ul.class-addr li{
				padding: 7px 5px;
				overflow: hidden;
			}
			.class-addr .addr-item .left{
				display: inline-block;
				float: left;
			}
			.addr-item .addr,
			.addr-item .sub-addr{
				display: block;
			}
			.addr-item .addr{
				font-size: 14px;
				margin-bottom: 2px;
			}
			.addr-item .sub-addr{
				font-size: 13px;
				color: #b4b4b4;
			}
			.class-addr .addr-item .select-icon{
				float: right;
				display: inline-block;
				width: 20px;
				height: 20px;
				margin-top: 5px;
				background-image: url(../images/icons/unselect.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.addr-item.select .select-icon{
				background-image: url(../images/icons/select.png);
			}
			/*** other-addr ***/
			div.other-addr p{
				text-align: center;
				color: #53ceca;
				font-size: 14px;
				padding-top: 10px;
			}
			ul.others{
				border-top: none;
				border-bottom: none;
				padding: 0;
				margin-bottom: 0;
			}
			/* evaluate-link */
			ul.evaluate-link li a{
				overflow: hidden;
				display: block;
				color: #42455c;
			}
			.evaluate-link .left{
				float: left;
				font-size: 14px;
			}
			.evaluate-link .arrow{
				float: right;
				display: inline-block;
				width: 11px;
				height: 16px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url(../images/icons/arrow_in.png);
			}
			/* confirm-btn */
			.confirm-btn{
				display: block;
				width: 95%;
				height: 35px;
				margin: 10px auto;
				background-color: #53ceca;
				border: none;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				font-size: 16px;
				font-weight: 600;
				color: #fff;
				text-align: center;
				line-height: 35px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="top">
				<img class="top-bg" src="../images/teacher.png" alt="">
				<div class="t-b">
					<div class="t-b-l">
						<div class="avatar">
							<img src="../images/avatar.jpg" alt="">
						</div>
						<div class="teach-info">
							<p class="name">默瀚</p>
							<p class="teach-time">教龄10年</p>
						</div>
						<span class="level">Lv.10</span>
						<span class="honour">名</span>
					</div>
					<div class="t-b-r">
						<span class="money-icon">¥</span>
						<span class="money">2,000</span>
					</div>
				</div>
			</div>
			<ul class="intro">
				<div class="intro-title">
					<span class="left-border"></span>
					<span class="title">课程介绍</span>
				</div>
				<li class="teach-range">
					<div class="left">授课范围</div>
					<div class="right">
						<span class="item">哈他,</span>
						<span class="item">减肥,</span>
						<span class="item">理疗,</span>
						<span class="item">脊柱</span>
					</div>
				</li>
				<li class="teach-aera">
					<div class="left">授课区域</div>
					<div class="right">
						<span class="item">东城区,</span>
						<span class="item">朝阳区</span>
					</div>
				</li>
				<li class="authentication">
					<div class="left">个人认证</div>
					<div class="right">
						悠季瑜伽资深教师证书
					</div>
				</li>
				<li class="cancel-policy">
					<div class="left">取消政策</div>
					<div class="right">免费取消</div>
				</li>
			</ul>
			<ul class="evaluate">
				<li>
					<span class="eva-title">
						<span class="left-border"></span>
						<span class="title">学员评价</span>
					</span>
					<span class="stars">
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="star select"></span>
						<span class="result">5.0</span>
					</span>
					<a class="total-eva" href="">
						<span class="total">256条</span>
						<span class="arrow"></span>
					</a>
				</li>
			</ul>
			<ul class="class-time">
				<div class="time-title">
					<span class="left-border"></span>
					<span class="title">课程开始时间（1课时60分钟）</span>	
				</div>
				<li class="dates">
					<span class="date">
						<span class="date-t">07.31</span>
						<span class="date-w">今天</span>
					</span>
					<span class="date">
						<span class="date-t">08.01</span>
						<span class="date-w">周五</span>
					</span>
					<span class="date">
						<span class="date-t">08.02</span>
						<span class="date-w">周六</span>
					</span>
					<span class="date select">
						<span class="date-t">08.03</span>
						<span class="date-w">周日</span>
					</span>
					<span class="date">
						<span class="date-t">08.04</span>
						<span class="date-w">周一</span>
					</span>
					<span class="date">
						<span class="date-t">08.05</span>
						<span class="date-w">周二</span>
					</span>
					<span class="date">
						<span class="date-t">08.06</span>
						<span class="date-w">周三</span>
					</span>
				</li>
				<li class="hour">
					<span class="pass">9:00</span>
					<span class="pass">10:00</span>
					<span class="pass">11:00</span>
					<span>14:00</span>
					<span class="select">15:00</span>
					<span>16:00</span>
					<span>17:00</span>
					<span>18:00</span>
					<span class="cannot-select">19:00</span>
					<span class="cannot-select">20:00</span>
				</li>
			</ul>
			<ul class="class-addr">
				<div class="addr-title">
					<span class="left-border"></span>
					<span class="title">上课地址</span>
				</div>
				<li class="addr-item select">
					<span class="left">
						<span class="addr">上门</span>
						<span class="sub-addr">自选场地</span>
					</span>
					<span class="select-icon"></span>
				</li>
				<li class="addr-item ">
					<span class="left">
						<span class="addr">朝阳公园会馆</span>
						<span class="sub-addr">朝阳公园南路1号网球中心</span>
					</span>
					<span class="select-icon"></span>
				</li>
				<li class="addr-item ">
					<span class="left">
						<span class="addr">日坛会馆</span>
						<span class="sub-addr">朝阳公园南路1号网球中心</span>
					</span>
					<span class="select-icon"></span>
				</li>
				<div class="other-addr">
					<p class="">其他上课地址</p>
					<ul class="others" style="display: none;">
						<li class="addr-item ">
							<span class="left">
								<span class="addr">朝阳公园会馆</span>
								<span class="sub-addr">朝阳公园南路1号网球中心</span>
							</span>
							<span class="right select-icon"></span>
						</li>
					</ul>
				</div>
			</ul>
			<ul class="evaluate-link">
				<li>
					<a href="">
						<span class="left">上过课了？快进来评价一下吧！</span>
						<span class="right arrow"></span>
					</a>
				</li>
			</ul>
			<button class="confirm-btn" type="button">我要上课</button>
		</div>
	</body>
</html>